<template>
    <e-charts class="chart" :option="option"></e-charts>
</template>
<script>
 import { histogramData } from "@/api/system/chartConfig";

export default {
    name:"chartView",
    computed:{
        option(){
            return{
                backgroundColor:"#a8aaac",
                title:{
                    text:this.name,
                    left:"center",
                    textStyle: {
                    fontSize: 30
                    }
                },
                legend: {bottom:"-5px"},
                tooltip: {
                    trigger: 'none',
                    axisPointer: {
                    type: 'cross'
                    }
                },
                xAxis: [{
                    name:"设备", //
                    type: 'category',
                    axisLine: {
                        
                        onZero: false,
                        lineStyle: {
                        }
                    },
                    data:this.xDatas// x轴
                }],
                yAxis: {
                    name:this.unit,
                    type: 'value'//y轴
                },
                series:this.serials
            }
        }
    },
    created(){
        this.getData();
      this.timer=  setInterval(() =>{
          this.getData();
        },this.time*1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    methods:{

      
     async   getData(){
       await  histogramData({deviceGraphicalId:this.currentId}).then( async (response) =>
         {
           this.data =  await response.data;
        
        //    this.colors =     this.data.data.map(d=>d.color);
          this.xDatas=   this.data.data.map(item=> {return item.deviceName});
            this.serials=   [{
                        // name:item.deviceName,
                        // smooth:true,
                        type:'bar',
                        data: this.data.data.map(item=> {return item.value})
                    }]
      
        })
        }
    },

    data() {
        return{
            timer:null,
        time:this.$route.query.time,
           data: [],
           currentId: this.$route.query.currentId,
           name:this.$route.query.name,
           serials:[],
           xDatas:[],
           unit:this.$route.query.unit==1?'Kpa':'°C',
        }
    },
}
</script>

<style scoped>
.chart{
    height: 400px;
}
</style>
